<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/vue.min.js"></script>
    <script src="js/elementui.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/common.js"></script>
 
    <title>Document</title>
</head>

<body>
    <div id="app">
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="label" label="菜单名字" width="180">
            </el-table-column>
            <el-table-column prop="href" label="链接地址" width="180">
            </el-table-column>
            <el-table-column prop="imgicon" label="图标" width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template slot="header" slot-scope="scope">
                    <el-button size="mini" type="primary" @click="add">增加</el-button>
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 增加菜单 -->
        <el-dialog title="增加菜单" :visible.sync="dialogFormVisibleAdd">
            <el-form :model="formadd">
                <el-form-item label="菜单名字" label-width="80px">
                    <el-input v-model="formadd.label" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="链接地址" label-width="80px">
                    <el-input v-model="formadd.href" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图标" label-width="80px">
                    <el-input v-model="formadd.imgicon" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属父级" label-width="80px">
                    <el-cascader :props="parentidProps" :show-all-levels="false" v-model="formadd.parentid"
                        :options="parentidOptions"></el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addsubmit = false">确 定</el-button>
            </div>
        </el-dialog>
		
		<el-dialog title="编辑菜单" :visible.sync="dialogFormVisibleup">
		    <el-form :model="formup">
		        <el-form-item label="菜单名字" label-width="80px">
		            <el-input v-model="formup.label" autocomplete="off"></el-input>
		        </el-form-item>
		        <el-form-item label="链接地址" label-width="80px">
		            <el-input v-model="formup.href" autocomplete="off"></el-input>
		        </el-form-item>
		        <el-form-item label="图标" label-width="80px">
		            <el-input v-model="formup.imgicon" autocomplete="off"></el-input>
		        </el-form-item>
		        <el-form-item label="所属父级" label-width="80px">
		            <el-cascader :props="parentidProps" :show-all-levels="false" v-model="formup.parentid"
		                :options="parentidOptions"></el-cascader>
		        </el-form-item>
		    </el-form>
		    <div slot="footer" class="dialog-footer">
		        <el-button @click="dialogFormVisibleup = false">取 消</el-button>
		        <el-button type="primary" @click="upsubmit = false">确 定</el-button>
		    </div>
		</el-dialog>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            tableData: [],
            dialogFormVisibleAdd: false,
			dialogFormVisibleup: ,
            formaup: {
                label: "",
                href: "",
                imgicon: "",
                parentid: 0
            },
			formadd: {
			    label: "",
			    href: "",
			    imgicon: "",
			    parentid: 0
			},
            parentidOptions: [],//父级菜单集合
            parentidProps: {
                value: "id",
                emitPath: false
            },//配置父级菜单cascder

        },
        methods: {
            initTableData() {
                let that = this
                axios.get(API + "selectmenu").then(function (res) {
                    that.tableData = res.data.data.menuList
                }).catch(err => {
                    console.log(err)
                });
            },

            handleEdit(index, row) {
                console.log(index, row);
            }, add() {
                let that = this
                axios.get(API + "selectmenu").then(function (res) {
                    let arrs = arrayToTree(res.data.data.menuList)
                    that.parentidOptions = arrs
                }).catch(err => {
                    console.log(err)
                });
                this.dialogFormVisibleAdd = true
            }, addsubmit() {//提交
                console.log(this.formadd)
            },
			upsubmit(){//编辑
				
			}
        }, mounted() {
            this.initTableData();
        }
    })
</script>

</html>